<html>
    <head>
        <title> 用 key 管理复用的元素</title>
    </head>
    <body>
        <script>
            // ★四、 用 key 管理复用的元素
                                             
                                        /*
                                             Vue 会尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。
                                             这么做出了事Vue变得非常快之外，还有其他一些好处。
                                             例如，如果你袁旭用户在不同的登录方式之间切换：

                                                    eg：
                                                        <template v-if="loginType=== 'username'">
                                                            <label>Username</label>
                                                            <input palceholder="Enter your username">
                                                        </template>
                                                        <template v-else>
                                                            <label>Email</label>
                                                            <input placehodler="Enter your email">
                                                        </template>

                                                 那么，在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉-----仅仅是替换了它的placeholder.


                                                 这样也不总是复合实际需求，所以Vue 为你提供了一种方式来表达 "这两个元素是完全独立的，不要复用它们"。
                                                 这时候，只需要添加一个具有唯一值的 key atrribute即可：

                                                    eg:
                                                        <template v-if="loginType==='username'">
                                                            <lable>Username</label>
                                                            <input  placeholder="Enter your username " key="username-input">
                                                        </template>
                                                        <template v-else>
                                                            <label>Email</label>
                                                            <input placeholder="Enter your email address" key="email-input">
                                                        </template>

                                                     现在，每次切换时，输入框都将被重新渲染，不会再被复用。
                                                     注意： <label>元素仍然会被高效地复用，因为他们没有添加 key 属性
                                        */
        </script>
    </body>
</html>